<template>
    <el-container class="home_container">
<!--        头部容器-->
        <el-header>
            <div class="title_box">
                <img src="../assets/logo.png" alt="">
                <span>电商后台管理系统</span>
            </div>
            <el-button class="logout_btn" type="info" @click="logout">退出</el-button>
        </el-header>
<!--        页面区域-->
        <el-container>
<!--            侧边导航-->
            <el-aside :width="isCollapse?'64px':'200px'">
                <div class="toggle_btn" @click="changeMenuStyle">|||</div>
                <el-menu
                    :default-active="$route.path"
                    router
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    class="el-menu-vertical-demo"
                    background-color="#333744"
                    text-color="#fff">
                    <el-submenu
                        :index="item.id+''"
                        v-for="item in menusList"
                        :key="item.id">
                        <template slot="title">
                            <i :class="'icon iconfont '+iconObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <el-menu-item
                            v-for="it in item.children"
                            :key="it.id"
                            :index="'/'+it.path">
                            <i class="el-icon-menu"></i>
                            <span>{{ it.authName }}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
<!--            主体内容-->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Home",
    created() {//真正的读取到data中的数据
        this.getMenusList();
        console.log(this.$route)
    },
    data(){
        return{
            isCollapse: false,
            menusList: [],
            iconObj: {
                "125": "icon-user",
                "103": "icon-tijikongjian",
                "101": "icon-shangpin",
                "102": "icon-danju",
                "145": "icon-baobiao"
            }
        }
    },
    methods: {
        //changeMenuStyle
        changeMenuStyle(){
            this.isCollapse = !this.isCollapse
        },
        //获取菜单数据
        async getMenusList(){
            let {data:res} = await this.$http.get("menus");
            console.log(res);
            //报错处理
            if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
            //成功后把数据放到data中
            this.menusList = res.data;
        },
        logout(){
            //清楚本地存储
            // window.sessionStorage.removeItem("token")
            window.sessionStorage.clear()
            //跳转到登录页面
            this.$router.push("/login")
        }
    }
}
</script>

<style scoped lang="scss">
.home_container{
    height: 100%;
}
.el-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    background-color: #373d41;
    font-size: 22px;
    color: #fff;
    .title_box{
        display: flex;
        align-items: center;
        img {
            transform: scale(0.2);
        }
        span{
            //margin-left: 15px;
        }
    }
    .logout_btn{
        float: right;
        margin-right: 20px;
    }
}
.el-aside{
    background-color: #333744;
    .toggle_btn{
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 10px;
        cursor: pointer;
        color: #ffffff;
        letter-spacing: 2px;
        background-color: #4a5064;
    }
    .el-menu{
        border-right: none;
        .iconfont{
            margin-right: 10px;
        }
    }
}
.el-main{
    background-color: #eaedf1;
}
</style>